<template>
    <div class="system-know-container">
        <div class="container-head">
            <h3>规则库更新</h3>
            <div class="now">
                <span>当前版本</span>
                <p>{{nowUse.name.substring(0, nowUse.name.length - 4)}}</p>
                <p>更新时间: {{nowUse.uploadTime}}</p>
            </div>
            <el-upload
                v-auth="{code: 300006002001}"
                class="upload-demo"
                accept=".zip "
                action=""
                :http-request="myUploadHttp"
                :limit="1"
                :file-list="fileList">
                <el-button class="upload-btn" size="small" type="primary">更新规则库</el-button>
            </el-upload>
        </div>
        <p class="table-title">更新记录</p>
        <div class="table-box">
            <el-table
                ref="tableData"
                :data="tableData"
                tooltip-effect="light"
                border
                :max-height="tableHeight"
                @sort-change="sortChange"
                class="data-table">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="版本号"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.name.substring(0, scope.row.name.length - 4)}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dictionaryName"
                    align="center"
                    label="字典表"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="javaCodeName"
                    align="center"
                    label="java代码库"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="uploadTime"
                    align="center"
                    label="更新时间"
                    sortable="custom"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.state === 0" v-auth="{code: 300006002002}"
                                   @click="tableEdit(scope.$index, scope.row)">还原</el-button>
                        <span class="in-use" v-else-if="scope.row.state === 1">当前使用</span>
                        <span class="in-return" v-else-if="scope.row.state === 2"><i class="el-icon-loading"></i>还原中</span>
                        <span class="in-stop" v-else-if="scope.row.state === 3"><i class="el-icon-loading"></i>停用中</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {getRuleBaseList, reductionData, uploadRuleBase} from '@/api/system/rule-base'
    import {showBtnAuth, getSortString} from '@/utils/filters'
    import * as signalR from '@microsoft/signalr'

    export default {
        name: 'index',
        data () {
            return {
                // 表格数据
                tableData: [],
                // 文件列表
                fileList: [],
                // 表格高度
                tableHeight: 100,
                // 当前使用
                nowUse: {
                    name: '',
                    uploadTime: ''
                },
                // 使用储存的数据，不去请求
                useStore: false,
                // 排序字段
                sortMap: {},
                // 排序方式
                sortType: '',
                // 连接srg
                connection: null
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            let height = document.documentElement.clientHeight - 390
            this.tableHeight = height > 107 ? height : 107
            this.getData()
            this.joinSRG()
        },
        mounted () {
            window.onresize = () => {
                let height = document.documentElement.clientHeight - 390
                this.tableHeight = height > 107 ? height : 107
            }
        },
        methods: {
            showBtnAuth,
            /**
             * 连接srg
             */
            joinSRG () {
                // 针对开发环境下判断
                let hubUrl = window.location.href.includes('localhost') ? 'http://192.168.0.50/mc/commandhub' : '/mc/commandhub'
                let connection = new signalR.HubConnectionBuilder().withAutomaticReconnect().withUrl(hubUrl).build()
                connection.start().catch()
                connection.on('broadcast', (msg) => {
                    let data = msg
                    let kind = data.kind
                    let body = JSON.parse(data.body)
                    if (kind === 2) {
                        this.tableData.forEach(item => {
                            if (item.id === body.Id) {
                                item.state = 1
                            } else {
                                item.state = 0
                            }
                        })
                    }
                })
            },
            /**
             * 获取表格数据
             */
            getData () {
                let params = {
                    index: 1,
                    pageSize: 1000
                }
                if (this.sortType) params.orderBy = this.sortType
                if (this.getSession(this.$route.name, 'getRuleBaseList') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getRuleBaseList')
                    if (res.code.toString() === '200') {
                        this.tableData = res.data.rows
                        this.sortMap = res.data.maps
                        if (this.tableData.filter(item => item.state === 1 || item.state === 3).length) {
                            this.nowUse = this.tableData.filter(item => item.state === 1 || item.state === 3)[0]
                        }
                    }
                } else {
                    getRuleBaseList(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getRuleBaseList: res})
                        if (res.code.toString() === '200') {
                            this.tableData = res.data.rows
                            this.sortMap = res.data.maps
                            if (this.tableData.filter(item => item.state === 1 || item.state === 3).length) {
                                this.nowUse = this.tableData.filter(item => item.state === 1 || item.state === 3)[0]
                            }
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 排序修改
             * @param colData.prop 排序参数
             * @param colData.order 正序倒序 ascending 升序 descending 降序 null 不排序默认
             */
            sortChange (colData) {
                this.sortType = getSortString(colData, this.sortMap)
                this.tableData = []
                this.currentPage = 1
                this.getData()
            },
            /**
             * 编辑表格内容
             * @param index 索引
             * @param row 行数据
             */
            tableEdit (index, row) {
                let params = {
                    id: row.id
                }
                reductionData(params).then(res => {
                    if (res.code.toString() === '200') {
                        this.$message.success('还原成功')
                        this.getData()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            /**
             * 自定义上传
             */
            myUploadHttp (data) {
                let form = new FormData()
                form.append('file', data.file)
                uploadRuleBase(form).then(res => {
                    this.fileList = []
                    if (res.code.toString() === '200') {
                        this.$message.success('上传成功')
                        this.getData()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        },
        beforeDestroy () {
            this.connection = null
            window.onresize = null
        }
    }
</script>

<style lang="scss" scoped>
    .system-know-container {
        background: #fff;
        margin-bottom: 10px;
        .container-head {
            margin-bottom: 15px;
            position: relative;
            h3 {
                margin: 0 0 108px 0;
                font-size: 26px;
                color: #373E42;
                line-height: 65px;
                text-align: center;
            }
            .now {
                position: absolute;
                top: 73px;
                left: 50%;
                transform: translate(-50%, 0);
                min-width: 260px;
                height: 90px;
                background: #F1A02A;
                border-radius: 4px;
                span {
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin: 5px 0 0 10px;
                }
                p {
                    margin: 0;
                    text-align: center;
                    &:nth-child(2) {
                        font-size: 26px;
                        color: #fff;
                        line-height: 37px;
                        margin-bottom: 3px;
                        padding: 0 10px;
                    }
                    &:nth-child(3) {
                        font-size: 13px;
                        font-weight: 400;
                        color: #fff;
                        line-height: 18px;
                    }
                }
            }
            .upload-demo {
                width: 160px;
                margin: 10px auto 0;
                .upload-btn {
                    width: 160px;
                    background: #3A9BFF;
                    border-radius: 4px;
                    color: #fff;
                }
                /deep/ .el-upload-list {
                    display: none;
                }
            }
        }
        .table-title {
            font-size: 13px;
            color: #373E42;
            font-weight: bold;
            line-height: 18px;
            margin: 0 0 0 20px;
        }
        .table-box {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            /*height: calc(100vh - 183px);*/
            .add-btn {
                margin-bottom: 10px;
            }
            .in-use {
                color: #57C942;
            }
            .in-return {
                color: #F1A02A;
            }
            .in-stop {
                color: #e21f06;
            }
        }
        /deep/ .el-dialog {
            width: 800px !important;
            .el-dialog__body {
                padding: 10px;
                .dialog-form {
                    width: 90%;
                    margin: 0 auto;
                    .el-form-item {
                        .el-input {
                            width: 220px;
                        }
                    }
                }
            }
            .el-dialog__footer {
                text-align: right;
            }
        }
    }
</style>
